<template>
	<view>
		<uni-popup ref="popup" type="bottom">
			<view class="bg-white w-full pb-[30rpx] z-103 relative ">
				<view
					class="text-[32rpx] text-center text-[#333333] py-[40rpx] border-0 border-b border-[#EBEBEB] border-solid">
					优惠券
				</view>
				<view class="p-[30rpx]">

					<view class="" v-if="couponList.length > 0">
						<scroll-view scroll-y="true" class="max-h-[800rpx]" @scroll="scroll">
							<view class="bg-white rounded-[16rpx] mb-[20rpx]" v-for="(item,index) in couponList"
								:key="index" @click="selectCoupon(item.id)">
								<view class="flex justify-between">
									<view
										class="w-[224rpx] h-[154rpx] bg-[#169281] rounded-[8rpx] flex flex-col justify-center relative z-0">
										<view class="flex justify-center items-center">
											<text class="text-[56rpx] text-[#FFFFFF] font-bold">{{item.price}}</text>
											<text class="text-[32rpx] text-[#FFFFFF] ml-[8rpx] font-light">元</text>
										</view>
										<view class="text-center mt-[20rpx]">
											<view
												class="inline-flex h-[40rpx] leading-[40rpx] px-[20rpx] text-[24rpx] rounded-[20rpx] text-[#FFFFFF] bg-[#0e7163]">
												{{item.coupon_type}}</view>
										</view>
										<view class="absolute w-full flex justify-between items-center">
											<view class="h-[20rpx] w-[20rpx] rounded-1 bg-[#F9F9F9] ml-[-10rpx]"></view>
											<view class="mr-[-14rpx] flex flex-col">
												<view class="h-[20rpx] w-[20rpx] rounded-1 bg-[#FFFFFF] my-[4rpx]"
													v-for="i in 5" :key="i"></view>
											</view>
										</view>
									</view>
									<view class="py-[20rpx] ml-[24rpx] flex-1">
										<view class="text-[32rpx] text-[#169281] font-medium mb-[20rpx]">
											{{item.coupon_name}}
										</view>
										<view class="text-[#999999] text-[24rpx] font-medium mb-[10rpx]">
											{{item.limit_content}}
										</view>
										<view class="text-[#999999] text-[24rpx] font-medium">
											{{item.valid_end_date}}
										</view>
									</view>
									<view class="flex items-center justify-center">
										<uto-icon name="radioed" v-if="selectedCoupon == item.id" color="#169281" class="mr-[10rpx]"
											size="28"></uto-icon>
										<uto-icon name="radio" v-else color="#cccccc" class="mr-[10rpx]" size="28"></uto-icon>
									</view>
								</view>
							</view>
						</scroll-view>
						<view @click="selectCoupon(0)"
							class="flex justify-between items-center py-[20rpx] border-0 border-t border-[#EBEBEB] border-solid">
							<text>不使用优惠券抵扣</text>
							<uto-icon name="radioed" v-if="selectedCoupon == 0" color="#169281" class="mr-[10rpx]"
								size="28"></uto-icon>
							<uto-icon name="radio" v-else color="#cccccc" class="mr-[10rpx]" size="28"></uto-icon>
						</view>
					</view>
					<view v-else>
						<view class="flex flex-col justify-center items-center pt-[300rpx]">
							<uto-icon name="empty" color="#eeeeee" size="40"></uto-icon>
							<view class="mt-[20rpx] text-[#999]">
								无数据
							</view>
						</view>
					</view>
				</view>

				<view
					class="mx-[30rpx] bg-[#169281] h-[88rpx] leading-[88rpx] rounded-[8rpx] text-[#FFFFFF] text-[32rpx] text-center"
					@click="submit">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts">
	import { defineComponent, ref, reactive } from 'vue';

	export default defineComponent({
		name: 'payment',
		setup(_,{emit}) {
			const popup = ref(null);

			const openPopup = (c:any) => {
				if (popup.value) {
					couponList.value=c;
					popup.value.open();
				}
			};
			
			const closePopup = ()=>{
				popup.value.close();
			}

			const selectedCoupon = ref(0);
			
			// 切换优惠券
			const selectCoupon = (id:number) => {
				selectedCoupon.value = id;
			}

			const couponList = ref([])

			const scroll = () => {

			}
			
			

			// 确认
			const submit = () => {
				emit('changeCoupon', selectedCoupon.value);
				closePopup();
			}


			return {
				popup,
				openPopup,
				couponList,
				scroll,
				submit,
				selectedCoupon,
				selectCoupon
			};
		},
	});
</script>